import HelloWorld from "../01hello/hello-world";
import TodoList from "../01hello/todo-list";
import TestCode from "../02router/test-code";
import NewsList from "../02router/news-list";
import HelloStore from "../03store/hello-store";
import HelloStore2 from "../03store/hello-store2";
import HelloStore3 from "../03store/hello-store3";

import { Link, NavLink, useNavigate } from 'react-router-dom'
import "./router.css";


// 引入路由
import { Route, BrowserRouter, Routes } from "react-router-dom"
const BasicRoute = () => (
  <BrowserRouter>
    <div className="box">
      {/* 侧边导航 */}
      <Aside></Aside>
      {/* 右侧组件 */}
      <Routes>
        <Route exact path="/hello" element={<HelloWorld />} >
          {/* 配置子路由组件 */}
          <Route path="newslist/:t_cat_plant_pk" element={<NewsList />}></Route>
        </Route>
        <Route exact path="/test-code" element={<TestCode />} />
        <Route exact path="/todo-list" element={<TodoList />} />
        <Route exact path="/hello-store" element={<HelloStore />} />
        <Route exact path="/hello-store2" element={<HelloStore2 />} />
        <Route exact path="/hello-store3" element={<HelloStore3 />} />
        {/* 兜底配置 */}
        <Route path="*" element={<HelloWorld />} />
      </Routes>
    </div>
  </BrowserRouter>
);

function Aside() {
  // 获取navigate对象，用于编程式路由
  const navigate = useNavigate();

  return (
    <div className="aside-box">
      <ul>
        <li><Link to="/hello">hello world</Link></li>
        <li><NavLink to="/todo-list">todo-list</NavLink></li>
        <li><NavLink to="/hello-store">认识状态</NavLink></li>
        <li><NavLink to="/hello-store2">Connect与Dispatch</NavLink></li>
        <li><NavLink to="/hello-store3">useSelector与useDispatch</NavLink></li>
        <li><NavLink to="/test-code">考试编程题</NavLink></li>
      </ul>
      <button onClick={() => navigate('/hello/newslist/406')} >党建动态</button>
    </div>
  )
}

export default BasicRoute;